<template>
    <div class="home">
        <div class="home-top">
            <div class="container">
                <div class="home-header">
                    <home-header></home-header>
                </div>
                <div class="home-nav">
                    <home-nav @goSearch="goSearch"></home-nav>
                </div>
                <div class="home-banner">
                    <home-banner></home-banner>
                </div>
                <ul class="activity">
                    <li class="activity-item">
                        <img class="item-img" src="../assets/img/activities/activity.jpg" />
                    </li>
                    <li class="activity-item">
                        <img class="item-img" src="../assets/img/activities/activity.jpg" />
                    </li>
                    <li class="activity-item">
                        <img class="item-img" src="../assets/img/activities/activity.jpg" />
                    </li>
                    <li class="activity-item">
                        <img class="item-img" src="../assets/img/activities/activity.jpg" />
                    </li>
                </ul>
                <div class="home-top-main">
                    <div class="common-list">
                        <common-list :datalist="list1" :type="1"></common-list>
                    </div>
                    <div class="common-list">
                        <common-list :datalist="list2" :type="1"></common-list>
                    </div>
                </div>
            </div>
        </div>
        <div class="home-center">
            <div class="container">
                <div class="home-recommend">
                    <home-recommend></home-recommend>
                </div>
                <div class="home-recommend">
                    <home-recommend></home-recommend>
                </div>
                <div class="home-recommend">
                    <home-recommend></home-recommend>
                </div>
                <div class="home-recommend">
                    <home-recommend></home-recommend>
                </div>
            </div>
        </div>
        <div class="home-bottom">
            <div class="common-footer">
                <common-footer></common-footer>
            </div>
        </div>
    </div>
</template>

<script>
import HomeHeader from "../components/HomeHeader";
import HomeNav from "../components/HomeNav";
import HomeBanner from "../components/HomeBanner";
import CommonList from "../components/CommonList";
import HomeRecommend from "../components/HomeRecommend";
import CommonFooter from "../components/CommonFooter";

export default {
    components: {
        HomeHeader,
        HomeNav,
        HomeBanner,
        CommonList,
        HomeRecommend,
        CommonFooter
    },
    data() {
        return {
            list1:[
                {
                    id:1,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:2,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:3,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:4,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:5,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:6,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:7,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:8,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:9,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:10,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                }
            ],
            list2:[
                {
                    id:11,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:12,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:13,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:14,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:15,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:16,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:17,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:18,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:19,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                },
                {
                    id:20,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                }
            ]
        };
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
        goSearch(){
            this.$router.push('/list').catch(err=>{
                // console.log(err)
            })
        }
    },
    destroyed() {}
};
</script>

<style lang="less" scoped>
.home {
    width: 100%;
    background: #f6f6f6;
    .container {
        width: @max-width;
        margin: 0 auto;
    }
    .home-top {
        background: #ffffff;
        .home-banner,
        .activity,
        .common-list {
            padding-bottom: 45px;
        }
        .activity {
            display: flex;
            justify-content: space-between;
            .activity-item {
                
                .item-img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .home-top-main{
            
        }
    }
    .home-center {
        .container{
            padding:30px 0;
            display:flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .home-recommend{
                width:49%;
                margin:15px 0;
            }
        }
    }
    .home-bottom {
        background: #ffffff;

    }
}
</style>
